import styled from 'styled-components'
import img from '@img/all.png'

export const Wrap = styled.div`
	width: 100%;
	height: 250px;
	display: flex;
	flex-direction: column;
	border-bottom: 1px #ccc dashed;
	padding: 20px 0px 10px 0px;
	position: relative;
	font-size: 12px;
	color: rgb(78, 78, 78);
`
export const WrapBG = styled.div`
	background: url(${img}) no-repeat scroll 0px -100px transparent;
	width: 204px;
	height: 204px;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: -1;
	&.gm_meeting_bg {
		background-position: -205px -2623px;
	}
	&.aes_meeting_bg {
		background-position: 0px -2623px;
	}
	&.hidden {
		display: none;
	}
`
export const WrapFooter = styled.div`
	width: 100%;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.btn {
		margin-left: 10px;
		height: 25px;
		line-height: 25px;
	}
	.notice {
		color: red;
	}
	.attending_desc_or_option {
	}
	.meeting_card_audit_result {
		display: flex;
		.meeting_card_audit_name {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			max-width: 60px;
			display: inline-block;
			vertical-align: bottom;
			cursor: pointer;
		}
		.meeting_card_audit_detail {
			line-height: 1.5;
			text-align: left;
			font-size: 11px;
			box-sizing: content-box;
			margin: 0;
			padding: 0;
			color: #d21e1e;
		}
		.meeting_card_audit_desc {
			line-height: 1.5;
			text-align: left;
			color: #4e4e4e;
			font-size: 11px;
			box-sizing: content-box;
			margin: 0;
			padding: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			max-width: 100px;
			display: inline-block;
			vertical-align: bottom;
			cursor: pointer;
		}
	}
	.meeting_card_manager_option {
		flex: 1;
		display: flex;
		justify-content: flex-end;
	}
`
export const WrapBody = styled.div`
	width: 100%;
	flex: 1;
	display: flex;
	.main-left {
		width: 100%;
	}
	.ellipsis {
		max-width: 50%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: inline-block;
	}
	width: 100%;
	flex: 1;
	display: flex;
	.main-left {
		width: 100%;
	}
	.ellipsis {
		max-width: 50%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: inline-block;
	}
	.meeting-card-body-line {
		line-height: 24px;
		height: 24px;
		font-size: 12px;
		display: flex;
		.link-btn {
			color: rgb(0, 122, 192);
			margin-left: 10px;
			text-decoration: underline;
			cursor: pointer;
			font-size: 12px;
		}
		.meeting-card-span-organiger {
			padding-right: 4px;
			width: 100%;
		}
	}
	.meeting-card-meeting-name-info {
		.meeting-card-meeting-name-info-wrap {
			display: flex;
			align-items: center;
			height: 21px;
			.meeting_name {
				text-decoration: none;
				color: #4e4e4e;
				font-size: 14px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				max-width: 290px;
				display: inline-block;
				cursor: pointer;
				font-weight: 600;
			}
			.meeting_name:hover {
				color: #3e9bd0;
				text-decoration: underline;
			}
			.share_btn {
				text-decoration: underline;
				cursor: pointer;
				color: #2874bb;
				margin-left: 18px;
				font-size: 14px;
			}
			.edit_btn {
				line-height: 1.5;
				text-align: left;
				font-size: 14px;
				box-sizing: content-box;
				margin: 0;
				padding: 0;
				cursor: pointer;
				text-decoration: none;
				color: #4e4e4e;
				display: inline-block;
				left: 7px;
				background: url(${img}) no-repeat;
				background-position: -240px -305px;
				height: 30px;
				width: 30px;
				position: relative;
				margin-left: 19px;
			}
			.edit_btn:hover {
				background-position: -270px -305px;
			}
		}
	}
	.meeting-card-meeting-num-info {
		margin-top: 8px;
		color: #4e4e4e;
		height: 18px;
	}
	.meeting-card-date-time-info {
		margin-top: 11px;
		width: 100%;
		clear: both;
		overflow: hidden;
		max-width: calc(100% - 48px);
		.time_content_conflict {
			margin: 0;
			padding: 0;
			margin-top: 3px;
			color: #a21b1b;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			float: left;
			position: relative;
		}
		.time_content_tag {
			width: 58px;
			height: 15px;
			line-height: 15px;
			text-align: center;
			font-size: 11px;
			// background: url(${img}) no-repeat;
			// background-position: 0px -2189px;
			cursor: pointer;
			float: right;
			margin-left: 6px;
			margin-top: 5px;
			background: #d21e1e;
			color: #ffffff;
		}
	}
	.meeting-card-meeting-creator-info {
		font-size: 12px;
		height: 17px;
		margin-top: 11px;
	}
	.meeting-card-meetingspace {
		text-align: left;
		color: #4e4e4e;
		box-sizing: content-box;
		font-size: 12px;
		height: 40px;
		margin-top: 17px;
	}
	.meeting-card-meeting-rooms-info {
		.ellipsis {
			width: auto;
		}
		.rooms_detail {
			border-bottom: 1px solid #1e94da;
			color: #007ac0;
			display: inline-block;
			vertical-align: top;
		}
	}
	.participate_type_msg {
		line-height: 1.5;
		text-align: left;
		box-sizing: content-box;
		margin: 0;
		padding: 0;
		display: inline-block;
		font-size: 12px;
		color: gray;
	}
	.fixed-right {
		position: absolute;
		top: 0;
		right: 0;
		height: 100px;
		display: flex;
		flex-direction: column;
		.fixed-right-line {
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			padding: 4px 0px;
			&.quantumEncryption-line {
				margin-top: 10px;
				& > .quantumEncryption {
					margin-left: 15px;
					cursor: pointer;
				}
				.quantumEncryption {
					width: 21px;
					height: 21px;
					background-position: -189px -558px;
					background-repeat: no-repeat;
					&.qtmeeting {
						background-position: -441px -558px;
					}
					&.aesmeeting {
						background-position: -357px -558px;
					}
					&.gmeeting {
						background-position: -378px -558px;
					}
					&.cmeeting {
						background-position: -294px -558px;
					}
					&.vmeeting {
						background-position: -189px -558px;
					}
					&.rmmeeting {
						background-position: -42px -558px;
					}
				}
			}
		}
		.mt-each {
			width: 40px;
			height: 55px;
			justify-content: center;
			display: flex;
			flex-direction: column;
			cursor: pointer;
			.mt-each-header {
				display: flex;
				justify-content: center;
			}
			.mt-each-name {
				height: 30px;
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				text-align: center;
			}
		}
	}
`
export const RadioWrap = styled.div`
	display: flex;
	flex-direction: column;
	padding-top: 20px;
	margin: 0 33px;
`
export const ConflictDialogWrap = styled.div`
	height: 100%;
	padding: 0 34px 0px 34px;
	.conflict_list {
		padding-right: 20px;
		height: 100%;
		overflow-y: auto;
		.conflict_lis_item {
			position: relative;
			margin-top: 20px;
			border-bottom: 1px dotted #c7c7c7;
			height: 250px;
			.meeting-card-footer {
				position: absolute;
				bottom: 20px;
			}
		}
	}
	.content {
		margin: 0px 34px;
		& .content_line:nth-child(1) {
			padding-top: 50px;
		}
		& .content_line:nth-child(2) {
			padding-top: 30px;
			display: flex;
		}
		& .input_msg {
			top: -6px;
		}
	}
`
export const PhoneModalWrap = styled.div`
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	margin-top: -10px;
`
export const StyledRejectMeetingWrap = styled.div`
	.content {
		margin: 0px 34px;
		& .content_line:nth-child(1) {
			padding-top: 50px;
		}
		& .content_line:nth-child(2) {
			padding-top: 30px;
			display: flex;
		}
		& .input_msg {
			top: -6px;
		}
	}
`
export const CheckBoxWrap = styled.div`
	display: flex;
	flex-direction: column;
	padding-top: 20px;
	margin: 0 33px;
`
export const FileIcon = styled.i`
	position: relative;
	margin-top: -3px;
	& > span {
		width: 30px;
		height: 30px;
		margin-left: 10px;
		background-position: -120px -305px;
		background-image: url(${img});
		&:hover {
			background-position: -150px -305px;
		}
	}
`
